<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue';

let imgList:any[] = reactive([
    { 
        icon: new URL('../../../assets/sqm/carousel-icon-1.svg', import.meta.url).href,
        img: new URL('../../../assets/sqm/img_sense_01.png', import.meta.url).href,
    },
    { 
        icon: new URL('../../../assets/sqm/carousel-icon-2.svg', import.meta.url).href,
        img: new URL('../../../assets/sqm/img_sense_02.png', import.meta.url).href,
    },
    { 
        icon: new URL('../../../assets/sqm/carousel-icon-3.svg', import.meta.url).href,
        img: new URL('../../../assets/sqm/img_sense_03.png', import.meta.url).href,
    },
    { 
        icon: new URL('../../../assets/sqm/carousel-icon-4.svg', import.meta.url).href,
        img: new URL('../../../assets/sqm/img_sense_04.png', import.meta.url).href,
    },
    { 
        icon: new URL('../../../assets/sqm/carousel-icon-5.svg', import.meta.url).href,
        img: new URL('../../../assets/sqm/img_sense_05.png', import.meta.url).href,
    }
])

let activeIndex: Ref<number> = ref(0)

function setActive(index:number) {
    activeIndex.value = index
}
</script>

<template>
    <div class="relative flex justify-center items-center h-screen overflow-hidden info-carousel">
        <div class="bottom">
            <div class="bottom-content">
                <div class="bottom-list">
                    <div v-for="(item, index) in imgList" :key="index + '_1'" class="bottom-item">
                        <Transition name="show" mode="out-in" appear>
                            <img v-if="activeIndex === index" class="bottom-img" :src="item.img" alt="">
                        </Transition>
                    </div>
                </div>
                <div class="flex justify-center items-center">
                    <img
                        v-for="(item, index) in imgList"
                        :key="index + '_2'"
                        class="img-item"
                        :src="item.icon"
                        alt=""
                        @click="setActive(index)"
                    >
                </div>
            </div>
            <div class="circle bg-white rounded-full "></div>
        </div>
    </div>
</template>

<style scoped>
.info-carousel{
    background: #e6e0d8;
}
.bottom{
    position: absolute;
    bottom: -55vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: -15vw;
}
.bottom-list{
    height: 26vw;
    width: 30vw;
    overflow: hidden;
}
.bottom-item{
    position: absolute;
    height: 26vw;
    width: 30vw;
}
.bottom-img{
    transform: rotateZ(0deg);
    opacity: 1;
    padding-bottom: 80vw;
    box-sizing: content-box;
    height: 100%;
    width: 100%;
    /* animation: show 0.5s linear; */
    transition: all 0.5s ease-in-out;
}
.img-item{
    margin: 1rem 0.5rem;
    width: 4rem;
    height: 4rem;
    z-index: 1;
}
.circle{
    height: 80vw;
    width: 80vw;
}

.show-enter-from{
    opacity: 0;
    transform: rotateZ(45deg);
}
.show-leave-to{
    opacity: 0;
    transform: rotateZ(-45deg);
}
.show-enter-to, .show-leave-from{
    opacity: 1;
    transform: rotateZ(0);
}
</style>
